import React, { useEffect, useRef, useState } from 'react';
import { Button, Grid, Typography } from '@arco-design/web-react';
import { ParameterResponse } from '@/constants/type';

const { Row, Col } = Grid;
const CalculatePanelNumerical = (props: {
  oeeParameters?: boolean
  runningParameters?: boolean
  parameters?: ParameterResponse[] | null
  onChange: (t: 'parameter' | 'clear' | 'delete' | null, v: Partial<ParameterResponse> | string | null) => void
}) => {
  return <Row>
    <Col span={24} style={{ marginBottom: '0.5rem' }}>
      <Typography.Text style={{ color: 'grey' }}>运行参数：</Typography.Text>
      {
        !!props.runningParameters &&
        ([{
          name: '总时长',
          code: 'TOTAL_TIME'
        }, {
          name: '运行时长',
          code: 'RUN'
        }, {
          name: '空闲时长',
          code: 'IDLE'
        }, {
          name: '调试时长',
          code: 'DEBUG'
        }, {
          name: '报警时长',
          code: 'ALARM'
        }, {
          name: '离线时长',
          code: 'OFFLINE'
        }])
          .map(it => {
            return <Button size={'mini'} status="success" style={{ margin: '0.2rem 0.2rem', textAlign: 'center' }}
                           key={'parameter_run_' + it.code}
                           onClick={() => props.onChange('parameter', it)}>
              <Typography.Ellipsis showTooltip={true}> {it.name} </Typography.Ellipsis>
            </Button>;
          })
      }
    </Col>
    <Col span={24} style={{ marginBottom: '0.5rem' }}>
      <Typography.Text style={{ color: 'grey' }}>OEE参数：</Typography.Text>
      {
        !!props.oeeParameters &&
        ([{
          name: '可性指数',
          code: 'AVAILABILITY'
        }, {
          name: '质量指数',
          code: 'QUALITY'
        }, {
          name: '表现指数',
          code: 'PERFORMANCE'
        }])
          .map(it => {
            return <Button size={'mini'} status={'warning'} style={{ margin: '0.2rem 0.2rem', textAlign: 'center' }}
                           key={'parameter_result_' + it.code}
                           onClick={() => props.onChange('parameter', it)}>
              <Typography.Ellipsis showTooltip={true}> {it.name} </Typography.Ellipsis>
            </Button>;
          })
      }
    </Col>
    <Col span={24} style={{ marginBottom: '0.9rem' }}>
      <Typography.Text style={{ color: 'grey' }}>采集参数：</Typography.Text>
      {
        (props.parameters || []).map(it => {
          return <Button size={'mini'} type={'primary'} style={{ margin: '0.2rem 0.2rem', textAlign: 'center' }}
                         key={'parameter_id_' + it.id}
                         onClick={() => props.onChange('parameter', it)}>
            <Typography.Ellipsis showTooltip={true}> {it.name} </Typography.Ellipsis>
          </Button>;
        })
      }
    </Col>
    <Col span={24} style={{ marginBottom: '0.5rem' }}>
      <Grid cols={4} colGap={8} rowGap={8} style={{ flexGrow: '1' }}>
        <Grid.GridItem key={'calculate_panel_clear'} style={{ width: '1.5rem' }}>
          <Button size={'default'} type={'outline'} status={'danger'} style={{ width: '5rem' }}
                  onClick={() => props.onChange('clear', null)}>清空</Button>
        </Grid.GridItem>
        <Grid.GridItem key={'calculate_panel_delete'} style={{ width: '1.5rem' }}>
          <Button size={'default'} type={'outline'} status={'warning'} style={{ width: '5rem' }}
                  onClick={() => props.onChange('delete', null)}>删除</Button>
        </Grid.GridItem>
        {
          ['(', ')', '1', '2', '3', '+', '4', '5', '6', '-', '7', '8', '9', '*', '0', '.', '/', '%', '<', '>', '=', '!'].map(it => {
            return (<Grid.GridItem key={'calculate_panel_' + it} style={{ width: '1.5rem' }}>
              <Button size={'default'} type={'dashed'} style={{ minWidth: '5rem' }}
                      onClick={() => props.onChange(null, it)}>{it}</Button>
            </Grid.GridItem>);
          })}
      </Grid>
    </Col>
  </Row>;
};

export default CalculatePanelNumerical;